<template>
	<div class="modal">
		<Modal v-model="data.isShow" :mask-closable="false" width="900" :styles="{top: '60px'}">
			<p slot="header" class="header-view">结算</p>
			<div class="main-view">
				<div class="left-view">
					<Form ref="formValidate" :model="data.data" :label-width="80">
						<FormItem label="影厅：">
							<p>{{data.row.name}}</p>
						</FormItem>
                        <FormItem label="会员卡号：" v-if="costDetailData.isMember">
							<p>{{costDetailData.cardNo}}</p>
						</FormItem>
						<FormItem label="姓名：">
							<p>{{costDetailData.name}}</p>
						</FormItem>
						<FormItem label="手机号：">
							<p>{{costDetailData.phoneNum}}</p>
						</FormItem>
						<FormItem label="实到人数：">
							<p>{{costDetailData.number}}</p>
						</FormItem>
                        <FormItem label="开厅时间：">
							<p>{{startTime}}</p>
						</FormItem>
						<FormItem label="酒水消费："></FormItem>
						<Table 
							border
							:columns="goodsListColumns" 
							:data="goodsList"
							:height="height">
						</Table>
					</Form>
				</div>
				<div class="right-view">
					<div class="statistics">
						<XPriceView :data="data.orderData"></XPriceView>
					</div>
					<div class="pay-view">
						<XPaywayView
							:data="payWayData" :isMember="isMemberData"  :orderPrice="data.orderData.money">
						</XPaywayView>
					</div>
				</div>
			</div>
			<div slot="footer">
				<Button type="primary" :loading="data.isLoading" @click="clickSubmit">完成</Button>
				<Button @click="data.isShow = false">取消</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
import roomService from '@/network/service/roomService.js'
import XPaywayView from '@/components/XPaywayView'
import XPriceView from '@/components/XPriceView'
import $ from 'jquery'
import {formatTimestamp} from '@/common/js/date_util.js'

export default {
	components: {
		XPriceView,XPaywayView,
    },
	props: ['data', 'goodsList', 'costDetailData'],
	data() {
		return {
			isMemberData: {
				isMember: false,
				isGiveCredit: '',
				creditLine: '',
				mstatus: null
			},
			payWayData: {
				payWay: '2',
				isHand: '',
				password: ''
			},
			goodsListColumns: [
				{
					title: '商品名称',
					key: 'name',
					align: 'center'
				},
				{
					title: '数量',
					key: 'number',
					align: 'center',
					width: 80
				},
				{
					title: '价格',
					key: 'money',
					align: 'center',
					width: 80
				},
				{
					title: '商品状态',
					key: 'status',
					align: 'center',
					width: 100,
					render: (h, params) => {
						let status = params.row.status;
						if (status == 0) {
							return '未支付';
						} else if (status == 1) {
							return '已支付';
						} else if (status == 2) {
							return '支付失败';
						} else if (status == 3) {
							return '支付取消';
						} else if (status == 4) {
							return '支付超时';
						}
					}
				}
			],
			height: '',
			payFlag: false,
		}
	},
	mounted() {
		let formItem = $('.ivu-form-item');
		for(let i = 0; i < formItem.length; i++) {
			formItem[i].style.marginBottom = '.1rem';
		}
		if (this.goodsList.length > 4) {
			this.height = 300;
		}
	},
	computed: {
		startTime() {
			return formatTimestamp(this.costDetailData.startTime);
		}
	},
	methods: {
		clickSubmit () {
			let params = {
				id: this.data.orderData.oid,
				payWay: this.payWayData.payWay,
				isHand: 0
			}
			if (this.payWayData.payWay == 2) {
				params.getMoney = this.data.orderData.money
			} else if (this.payWayData.payWay == 8) {
				params.isHand = this.payWayData.isHand;
				params.handRoomId = this.data.row.rid
			} else if (this.payWayData.payWay == 1) {
				params.password = this.payWayData.password
			} else {
				params.getMoney = '';
			}
			this.$emit('on-submit', params, this.data);
		},
	}
}	
</script>

<style scoped lang="less">
.header-view {
	text-align: center;
	font-size: .14rem;
	color: #433E41;
}
.main-view {
	display: flex;
	// height: 8.2rem;
	.left-view {
		color: #433E41;
		border-right: .01rem solid #D5CED2;
		width: 50%;
		height: 100%;
		padding-right: .2rem;
		.td {
			width: 1rem;
			text-align: right;
		}
		.input {
			border: 1px solid #D5CED2;
			border-radius: 5px;
		}
		.btn {
			width: 1.8rem;
		}
	}
	.right-view {
		width: 50%;
		padding: 0 .2rem;
		.statistics {
			margin-bottom: .3rem;
		}
	}
}

</style>